.mermaid
  margin 10px 0
  padding 10px
  text-align center

:root[theme-mode=dark] .mermaid
  font-family 'trebuchet ms', verdana, arial, sans-serif
  font-size 16px
  fill #ccc
  .error-icon
    fill #a44141
  .error-text
    fill #ddd
    stroke #ddd
  .edge-thickness-normal
    stroke-width 2px
  .edge-thickness-thick
    stroke-width 3.5px
  .edge-pattern-solid
    stroke-dasharray 0
  .edge-pattern-dashed
    stroke-dasharray 3
  .edge-pattern-dotted
    stroke-dasharray 2
  .marker
    fill #d3d3d3
    stroke #d3d3d3
  .marker.cross
    stroke #d3d3d3
  svg
    font-size 16px
  .label
    color #ccc
  .cluster-label text
    fill #F9FFFE
  .cluster-label span
    color #F9FFFE
  .label text, span
    fill #ccc
    color #ccc
  .node :is(rect, circle, ellipse, polygon, path)
    fill #1f2020
    stroke #81B1DB
    stroke-width 1px
  .node .label
    text-align center
  .node.clickable
    cursor pointer
  .arrowheadPath
    fill #d3d3d3
  .edgePath .path
    stroke #d3d3d3
    stroke-width 2.0px
  .flowchart-link
    stroke #d3d3d3
    fill none
  .edgeLabel
    background-color hsl(0, 0, 34.4117647059%)
    text-align center
  .edgeLabel rect
    opacity 0.5
    background-color hsl(0, 0, 34.4117647059%)
    fill hsl(0, 0, 34.4117647059%)
  .cluster rect
    fill hsl(180, 1.5873015873%, 28.3529411765%)
    stroke rgba(#fff, 0.25)
    stroke-width 1px
  .cluster text
    fill #F9FFFE
  .cluster span
    color #F9FFFE
  .mermaidTooltip
    position absolute
    text-align center
    max-width 200px
    padding 2px
    font-family 'trebuchet ms', verdana, arial, sans-serif
    font-size 12px
    background hsl(20, 1.5873015873%, 12.3529411765%)
    border 1px solid rgba(#fff, 0.25)
    border-radius 2px
    pointer-events none
    z-index 100

:root[theme-mode=light] .mermaid
  font-family 'trebuchet ms', verdana, arial, sans-serif
  font-size 16px
  fill #000
  .error-icon
    fill #552222
  .error-text
    fill #552222
    stroke #552222
  .edge-thickness-normal
    stroke-width 2px
  .edge-thickness-thick
    stroke-width 3.5px
  .edge-pattern-solid
    stroke-dasharray 0
  .edge-pattern-dashed
    stroke-dasharray 3
  .edge-pattern-dotted
    stroke-dasharray 2
  .marker
    fill #666
    stroke #666
  .marker.cross
    stroke #666
  svg
    font-size 16px
  .label
    color #000
  .cluster-label text
    fill #333
  .cluster-label span
    color #333
  .label text, span
    fill #000
    color #000
  .node :is(rect, circle, ellipse, polygon, path)
    fill #eee
    stroke #999
    stroke-width 1px
  .node .label
    text-align center
  .arrowheadPath
    fill #333333
  .edgePath .path
    stroke #666
    stroke-width 2px
  .flowchart-link
    stroke #666
    fill none
  .edgeLabel
    background-color #fff
    text-align center
  .edgeLabel rect
    opacity .5
    background-color #fff
    fill #fff
  .cluster rect
    fill hsl(0, 0, 98.9215686275%)
    stroke #707070
    stroke-width 1px
  .cluster text
    fill #333
  .cluster span
    color #333
  .mermaidTooltip
    position absolute
    text-align center
    max-width 200px
    padding 2px
    font-size 12px
    background hsl(-160, 0, 93.3333333333%)
    border 1px solid #707070
    border-radius 2px
    pointer-events none
    z-index 100
